<template>
	<view class="container" :style="{paddingTop:$u.addUnit($u.getPx(navbarHeight)+$u.sys().statusBarHeight,'px')}">
		<view class="content">
			<image class="font-bg" src="/static/img/font-bg.png" mode=""></image>
			<image class="Chart position-c" src="/static/img/Chart.png" mode=""></image>
		</view>
		<view class="con">
			<view class="Card">
				<view class="flex-sb-center">
					<view class="">
						<text class="mainText mr30">小暑</text>
						<text class="date">7月1日</text>
					</view>
					<text class="">乙巳年癸未月丁丑日</text>
				</view>
				<view class="mtb30">
					<text class="mr50">农历六月十三</text>
					<text class="">倏忽温风至因循小暑来</text>
				</view>
				<view class="text flex">
					<view class="flex-1 flex-center">
						<view class="leftbg mr15">五运</view>
						<view>
							<view class="">主运 火运 （热）</view>
							<view class="mt10">客运 金运 （燥）</view>
						</view>
					</view>
					<view class="flex-1 flex-center">
						<view class="leftbg mr15">五运</view>
						<view>
							<view class="">主运 火运 （热）</view>
							<view class="mt10">客运 金运 （燥）</view>
						</view>
					</view>
				</view>
			</view>
			<view class="recomm flex-c-c mtb30">
				<image src="/static/img/recomm-01.svg" mode=""></image>
				<view class="mlr8" @click="onClick">猜你喜欢</view>
				<image src="/static/img/recomm-02.svg" mode=""></image>
			</view>
				<view class="goodsList">
					<goods-card v-for="item in list" :key="item"></goods-card>
				</view>
		</view>

	</view>
</template>

<script>
	import goodsCard from '@/components/goods/card.vue'
	export default {
		components: {
			goodsCard,
		},
		data() {
			return {
				navbarHeight: uni.$u.props.navbar.height,
				list: [1,2,3,4,5,6,7,8,9,10]
			}
		},
		created() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 800rpx;
		background-color: #b0ebee;
		background: linear-gradient(to bottom, #b0ebee, #f4f7f8);
		position: relative;

		.font-bg {
			width: 100%;
			height: 800rpx;
		}

		.Chart {
			width: 660rpx;
			height: 660rpx;
			bottom: 20rpx;
		}
	}

	.con {
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #000000;

		.mainText {
			font-weight: bold;
			font-size: 52rpx;
			color: #101010;
		}

		.date {
			font-size: 35rpx;
		}

		.text {
			text-align: center;
		}

		.leftbg {
			padding: 12rpx 5rpx;
			width: 48rpx;
			background: rgba(0, 194, 196, 0.88);
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.recomm {
			font-size: 36rpx;
			color: #000000;

			image {
				width: 26rpx;
				height: 32rpx;
			}
		}

		.goodsList {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}
</style>